<template>
  <div class="departments content">
    <el-card class="card">
      <el-tabs>
        <el-tab-pane label="组织架构"></el-tab-pane>
        <!-- 
          v-loading="loading(boolean:true:显示loading,false:不显示loading)"
           element-loading-text="loading文本内容"
          element-loading-spinner="loading图标el-icon-loading"
          element-loading-background="loading的背景色rgba(0, 0, 0, 0.8)"
         -->
        <div
          class="tree-content"
          v-loading="loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <!-- 下拉菜单
            el-dropdown
               默认插槽  默认显示的文本内容
               具名插槽 dropdown
                  el-dropdown-menu
                      dl-dropdown-item            
             -->
          <!-- <div class="tree-top">
            <div class="name">江苏传智播客教育科技股份有限公司</div>
            <div class="manager">负责人</div>

            <el-dropdown>
              <div class="options">
                操作<i class="el-icon-arrow-down el-icon--right icolor"></i>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>操作</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div> -->

          <treeItem :data="topData" :isTop="true"></treeItem>
          <hr />

          <el-tree :data="treeData">
            <template v-slot="{ data }">
              <!-- 步骤
            1：创建一个树形组件选项组件
            2：导入使用
            3：通过传值渲染数据
            
            -->
              <treeItem :data="data" @getData="getData"></treeItem>
            </template>
          </el-tree>
        </div>
      </el-tabs>
    </el-card>
    <!-- 弹框组件 
    bus传值
    1：在main.js Vue.prototype.$bus=new Vue()
    2:监听
        this.$bus.$on('方法名',(参数值)=>{...})
    3:触发
        this.$bus.$emit('方法名',实参值) 
    4：销毁监听
         this.$bus.$off('方法名') 
    -->
    <add :initData="initData" @getData="getData"></add>
  </div>
</template>
<script>
/*
    树形数据动态化
    1：定义api
    2:导入api
    3:调用api获取数据并渲染
      数据没有child?需要转换数据对应关系
      代码qc:平时要养成学会封装代码的习惯

  */
import { companyDepartment } from '@/api/departments'
import treeItem from './components/tree-item.vue'
import add from './components/add'
export default {
  components: {
    treeItem,
    add
  },
  data () {
    return {
      loading: false, // 是否显示loading
      treeData: [],
      topData: {
        name: '',
        manager: '负责人',
        id: ''
      },
      initData: []
    }
  },
  async created () {
    this.getData()
  },
  methods: {
    async getData () {
      this.loading = true
      const res = await companyDepartment()
      this.loading = false
      // this.treeData = res.depts
      this.topData.name = res.companyName
      this.initData = res.depts
      this.treeData = this.changeData(res.depts, '')
      window.console.log('组织架构列表数据：', res)
    },
    changeData (arr, pid) {
      return arr.filter(item => {
        if (item.pid === pid) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.departments {
  .card {
    padding: 30px;
    .tree-content {
      padding: 15px 35px;
    }
  }
}
</style>
